<template>
  <div
    class="my-header"
    :style="{background: bgColor, color: color}">{{ title }}</div>
</template>

<script>
/*
  需求：定义头部组件 - 支持用户传入的 背景色、标题、字体颜色
  当前组件接收自己的数据变量：props
  之前用 的数组接收法（out了）
  对象接收法
*/
export default {
  // props: ['bgColor'],
  props: {
    // 背景色
    bgColor: {
      type: String,// 类型 
      default: '#1d7bff' // 默认值
    },
    // 标题
    title: {
      type: String,
      required: true// 必传
    },
    // 字体颜色
    color: {
      type: String,
      default: '#fff'
    }
  }
}
</script>

<style lang="less" scoped>
  .my-header {
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: #1d7bff;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
  }
</style>